import React, { Component } from 'react';
import { AppState, Text, StyleSheet, View, TextInput, KeyboardAvoidingView, RefreshControl, Dimensions, ListView, Keyboard, TouchableOpacity, Platform, Alert, SafeAreaView } from 'react-native';
import { Flex, Button, Toast, } from 'antd-mobile-rn';
import moment from 'moment';
moment.locale("zh-cn");
const constants = {};
const screen = Dimensions.get("screen");
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        position: "relative"
    },
    dateItem: {
        // alignItems: 'center',
        paddingTop: 5,
        paddingBottom: 15
    },
    dateItemActive: {
        //backgroundColor: constants.themeColor,
        // alignItems: 'center',
        paddingTop: 5,
        paddingBottom: 15,

    },
    dateItemText: {
        color: "#B8B8B8"
    },
    dateItemActiveText: {
        color: "#fff"
    },
    taskTitle: {
        borderLeftWidth: 3,
        borderLeftColor: constants.activeColor,
        paddingLeft: 5,
        flexDirection: "row",
        alignItems: "center",
        position: "relative"
    },
    taskTitleText: {
        color: "#000",
        fontSize: 16,
        fontWeight: "bold"
    },
    studyView: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        paddingTop: 20,
        paddingBottom: 10
    },
    studyText: {
        textAlign: "center",
        marginRight: 5,
        marginTop: 15
    },
    studyHours: {
        color: constants.themeColor,
        fontSize: 45,
        fontWeight: "bold",
        textAlign: "center"
    },
    studyHoursText: {
        textAlign: "center",
        marginLeft: 5,
        marginTop: 15
    },
    taskListBox: {
        borderColor: "#cccccc",
        borderWidth: 2,
        fontSize: 12,
        width: 20,
        height: 20,
        textAlign: "center",
        alignItems: "center",
        justifyContent: "center",
        marginTop: 1,
        color: "#ccc"
    },
    taskListItemName: {
        fontSize: 16,
        color: "#292B4D",
        // marginLeft: 5
    },
    buttomBtnView: {
        position: "absolute",
        bottom: Platform.OS === 'android' ? 15 : 15,
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row",
        width: "100%",

    },
    addTaskView: {
        backgroundColor: "#fff",
        borderBottomWidth: 1,
        borderColor: "#ddd",
        height: 65,
        bottom: Platform.OS === 'android' ? 0 : 0,



    },
    addTaskViewTextInput: {
        width: "100%",
        height: 65,
        paddingLeft: 50,
        fontSize: 16
    },
    buttomBtn: {
        borderRadius: 15,
        width: 120,
        height: 38,
        backgroundColor: "#fff"

    },
    standalone: {
        marginTop: 30,
        marginBottom: 30,
    },
    standaloneRowFront: {
        alignItems: 'center',
        backgroundColor: '#CCC',
        justifyContent: 'center',
        height: 50,
    },
    standaloneRowBack: {
        alignItems: 'center',
        backgroundColor: '#8BC645',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 15
    },
    backTextWhite: {
        color: '#FFF'
    },
    rowFront: {

        alignItems: 'center',
        backgroundColor: '#ffffff',
        borderBottomColor: '#ddd',
        // borderBottomWidth: 1,
        height: 55,
        flexDirection: "row",
        // paddingLeft: 20
    },
    rowBack: {
        alignItems: 'center',
        backgroundColor: "transparent",
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 15,
        borderBottomColor: '#ddd',
        borderBottomWidth: 1,
    },
    backRightBtn: {
        alignItems: 'center',
        bottom: 0,
        justifyContent: 'center',
        position: 'absolute',
        top: 0,
        width: 75
    },
    backRightBtnLeft: {
        backgroundColor: 'blue',
        right: 75
    },
    backRightBtnRight: {
        backgroundColor: constants.activeColor,
        right: 0
    },
    controls: {
        alignItems: 'center',
        marginBottom: 30
    },
    switchContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginBottom: 5
    },
    switch: {
        alignItems: 'center',
        borderWidth: 1,
        borderColor: 'black',
        paddingVertical: 10,
        width: Dimensions.get('window').width / 4,
    },
    trash: {
        height: 25,
        width: 25,
    },
    calendarBox: {
        elevation: 5
    }
});



/**
 * 日期
 */
export default class DateWeek extends Component {




    constructor(props) {
        super(props);
    }


    render() {

        //const items = getDates(this.props.date);
        const items = this.props.dates;
        // const { items } = this.state;
        const { onItemClick, selectDate } = this.props;

        const sdate = moment(selectDate).format("YYYY-MM-DD");

        /**
        * 获取日期样式
        * @param {} index 
        */
        const getDateItemStyle = (date) => {
            const d1 = moment(date).format("YYYY-MM-DD");
            return d1 == sdate ? styles.dateItemActive : styles.dateItem;
        }

        const getDateItemTextStyle = (date) => {
            const d1 = moment(date).format("YYYY-MM-DD");
            return { color: d1 == sdate ? "#fff" : "#1E1F44" }
        }


        const nowDate = moment(new Date()).format("YYYY-MM-DD");

        return (
            <Flex style={{ backgroundColor: "#fff",paddingLeft:15,paddingRight:10 }}>
                {
                    items.map((date, index) => {
                        const swidth = ((screen.width-30) / 7) * 0.9;
                        const d1 = moment(date).format("YYYY-MM-DD");
                        
                        const activeStyle = (date) => {

                            const style = {
                                alignItems: "center",
                                justifyContent: "center",
                                width: swidth,
                                height: swidth,
                                borderRadius: 6,
                                fontSize: 16,
                                borderWidth:1,
                                borderColor:nowDate == d1?"#BFC5D2":"transparent"
                            };

                         
                            return d1 == sdate ? {
                                backgroundColor: "#1E1F44",
                                ...style

                            } : {
                                    backgroundColor: "#F6F6F6",
                                    ...style
                                }
                        }
                        return (
                            <Flex.Item activeOpacity={0.3} key={index} style={getDateItemStyle(index)} onPressIn={() => { onItemClick(index, date) }}>
                                <View style={{ marginBottom: 4, width: swidth, alignItems: "center" }} >
                                    <Text style={{ color: "#1E1F44", fontSize: 12 }}>周{moment(date).format("dd")}</Text>
                                </View>
                                <View 
                                
                                    style={{ justifyContent: "center" }}>
                                    <View style={[activeStyle(date), { position: "relative" }]}>

                                        <View style={{
                                            width: "60%",
                                            height: 3,
                                            backgroundColor: "#BFC5D2",
                                            marginBottom: 7,
                                            borderRadius: 2,
                                            ...this.props.getLineStyle(date)
                                        }}></View>
                                        <Text style={[getDateItemTextStyle(date), { marginBottom: 0 }]}>{moment(date).format("D")}</Text>
                                        {
                                            this.props.hasTask ? this.props.hasTask(date) : undefined
                                        }
                                    </View>

                                </View>
                            </Flex.Item>
                        )
                    })
                }
            </Flex>
        )
    }

}